<template>
    <!-- pages/mealpage/index.wxml -->
    <view class="page">
        <van-tabs nav-class="nav-class" custom-class="custom-class" :active="active" @change="onChange" title-active-color="#333333" title-inactive-color="#999999">
            <van-tab title="待核销">
                <view class="box" @tap="onDetails" :data-item="item" v-for="(item, index) in list" :key="index">
                    <view class="msg flexbox-sb">
                        <view class="centers">
                            <image class="headimg" :src="item.userHeadPortrait"></image>
                            <view class="name">{{ item.userNickName }}</view>
                        </view>
                        <view class="status" @tap.stop.prevent="onCancel" :data-id="item.id">待核销</view>
                    </view>

                    <view class="server">服务项目：</view>

                    <view
                        :class="'flexbox-sb serverbox mt-20 ' + (item.services.length > 3 && index == 2 ? 'opacity' : '')"
                        v-if="index < 3"
                        v-for="(v, index1) in item.services"
                        :key="v.id"
                    >
                        <view class="servername">{{ v.serviceName }}（原价￥{{ v.originalPrice }}/次）</view>

                        <view>x{{ v.residualQuantity > 0 ? v.residualQuantity : 0 + v.quantity > 0 ? v.quantity : 0 }}</view>
                    </view>

                    <view class="hr mt-20"></view>

                    <view class="ordermsg flexbox-sb">
                        <view class="code">订单号：{{ item.orderSn }}</view>
                        <view class="statusbtn" @tap.stop.prevent="onCancel">去核销</view>
                    </view>
                </view>
                <view class="w-100" v-if="list.length == 0">
                    <van-empty description="暂无数据" />
                </view>
            </van-tab>
            <van-tab title="已完成">
                <view class="box" @tap="onDetails" :data-item="item" v-for="(item, index) in list" :key="index">
                    <view class="msg flexbox-sb">
                        <view class="centers">
                            <image class="headimg" :src="item.userHeadPortrait"></image>
                            <view class="name">{{ item.userNickName }}</view>
                        </view>
                        <view class="status-s">{{ item.status == 1 ? '已完成' : '已过期' }}</view>
                    </view>

                    <view class="server">服务项目：</view>

                    <view
                        :class="'flexbox-sb serverbox mt-20 ' + (item.services.length > 3 && index == 2 ? 'opacity' : '')"
                        v-if="index < 3"
                        v-for="(v, index1) in item.services"
                        :key="v.id"
                    >
                        <view class="servername">{{ v.serviceName }}（原价￥{{ v.originalPrice }}/次）</view>

                        <view>x{{ v.residualQuantity > 0 ? v.residualQuantity : 0 + v.quantity > 0 ? v.quantity : 0 }}</view>
                    </view>

                    <view class="hr mt-20"></view>

                    <view class="ordermsg flexbox-sb">
                        <view class="code">订单号：{{ item.orderSn }}</view>
                        <view class="statusbtn" :data-item="item">查看详情</view>
                    </view>
                </view>
                <view class="w-100" v-if="list.length == 0">
                    <van-empty description="暂无数据" />
                </view>
            </van-tab>
        </van-tabs>
    </view>
</template>

<script>
// pages/mealpage/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            active: 0,
            shopimgUrl: app.globalData.shopimgUrl,
            status: 0,

            // 0可使用，1已用完
            page: 1,

            list: [],

            v: {
                id: '',
                serviceName: '',
                originalPrice: '',
                residualQuantity: 0,
                quantity: 0
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.getPackageBagByStoreId();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        this.setData(
            {
                page: 0
            },
            () => {
                // 获取订单列表接口
                this.getPackageBagByStoreId();
            }
        );
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        this.setData(
            {
                page: this.page + 1
            },
            () => {
                // 获取订单列表接口
                this.getPackageBagByStoreId();
            }
        );
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // 详情
        onDetails(e) {
            uni.navigateTo({
                url: '/pages/mealpage/details/index?id=' + e.currentTarget.dataset.item.id
            });
        },

        // 门店查询套餐包列表
        getPackageBagByStoreId() {
            const { status, page } = this;

            _request
                .get('/packageBag/getPackageBagByStoreId', {
                    storeId: uni.getStorageSync('storeId'),
                    status,
                    page,
                    size: 10
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        this.setData({
                            list: page > 1 ? [...this.list, ...res.data.data] : res.data.data
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 切换
        onChange(e) {
            this.setData(
                {
                    status: e.detail.index,
                    active: e.detail.index,
                    page: 1,
                    list: []
                },
                () => {
                    this.getPackageBagByStoreId();
                }
            );
        },

        // 去核销
        onCancel(e) {
            uni.scanCode({
                //扫描API
                success: function (res) {
                    if (res.path) {
                        uni.navigateTo({
                            url: '/pages/mealpage/cancel/index?id=' + res.path.split('=')[1]
                        });
                    } else {
                        uni.showToast({
                            title: '识别失败，请扫描正确的意约订单码',
                            icon: 'none',
                            duration: 1500
                        });
                    }
                },
                fail: function (res) {
                    uni.showToast({
                        title: '识别失败，请扫描正确的意约订单码',
                        icon: 'none',
                        duration: 1500
                    });
                }
            });
        }
    }
};
</script>
<style>
/* pages/mealpage/index.wxss */
/* vant组件样式 */
.van-tab--active {
    font-size: 32rpx !important;
    font-weight: 500 !important;
}

.nav-class {
    width: 500rpx;
    margin: 0 auto;
}

.van-tabs__line {
    background: #ff8722 !important;
}

.van-tab {
    height: 100%;
}

.van-tabs__nav,
.custom-class,
.van-tabs__scroll--line {
    background: #fbfbfb !important;
}

.box {
    width: 710rpx;
    margin: 20rpx 20rpx 0;
    background: #ffffff;
    box-shadow: 2px 2px 8px 0px rgba(236, 236, 236, 0.4);
    border-radius: 8px;
    padding: 20rpx;
    box-sizing: border-box;
}

.msg {
    height: 130rpx;
    border-bottom: 2rpx solid #f1f1f1;
}

.headimg {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}

.name {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
}

.status {
    height: 130rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 130rpx;
}

.server {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
    margin-top: 20rpx;
}

.serverbox {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
    margin-left: 20rpx;
}

.servername {
    position: relative;
    padding-left: 20rpx;
    height: 20rpx;
}

.servername::after {
    content: '';
    flex-grow: 1;
    width: 8rpx;
    height: 8rpx;
    background: #ff8722;
    border-radius: 50%;
    display: block;
    position: absolute;
    left: -6rpx;
    top: 14rpx;
}

.servername::before {
    content: '';
    flex-grow: 1;
    width: 16rpx;
    height: 16rpx;
    opacity: 0.49;
    background: #ff8722;
    border-radius: 50%;
    display: block;
    position: absolute;
    left: -10rpx;
    top: 10rpx;
}

.hr {
    width: 100%;
    height: 1rpx;
    border-bottom: 2rpx solid #f1f1f1;
}

.ordermsg {
    height: 120rpx;
    align-items: center;
}

.code {
    height: 120rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 120rpx;
}

.statusbtn {
    background: #ff8f05;
    box-shadow: 4px 4px 12px 2px rgba(255, 128, 0, 0.26);
    border-radius: 32px;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    padding: 0rpx 32rpx;
    height: 60rpx;
    line-height: 60rpx;
    box-sizing: border-box;
    width: auto;
}

.status-s {
    height: 130rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 130rpx;
    color: #333333;
}

.opacity {
    opacity: 0.5;
}
</style>
